Taskly - Task Management Web App responsive design, available for use on Mobile Phone, Tablet and Desktop.
Below is the presentation of 15 big steps of App creation from the scratch during my UX Design course. This is the first design I have ever made.
UI KIT
STEP 1: I made a MARKETING RESEARCH and COMPETITOR ANALYSIS, which lead me to first version of MVP.
STEP 2: I approached potential users with SURVEYS and INTERVIEWS and created USER PERSONAS.
THE SURVEY
INTERVIEWS
USER PERSONAS
STEP 3: I created TASK MODEL and CUSTOMER EXPERIENCE MAP.
STEP 4: I created a SITE MAP after making a competitors' WEBSITES AUDIT and learning my customer's expectations on future website's logic using a the CARD SORTING technique
Competitors' websites audit
CARD SORTING
SITE MAP
STEP 5: Then I created Taskly's WEBPAGE COPY, using copywriting priciples and SEO keyword research (with Google Adwords keyword planner)
SEO
WEBPAGE COPY
STEP 6: Next I created FIRST PAPER PROTOTYPES for 5 user flows, tested them with 3 testers through 3 goals to achive with the App and scenarios. Then I redesignen them according to the feedback I received.
STEP 7: After careful paper prototypes review I created FRAMEWORKS using SketchApp tool for the feature "Create a project" for 3 devices: mobile phone, tablet and desktop
STEP 8: Next I created INTERACTIVE PROTOTYPES and user flows between them using InVision tool for features "creating a project" and "creating a task" and conducted a USABILITY TEST. Then I prioritised all the problems detected and worked them out.
Links to interactive prototypes:
iPhone X
https://invis.io/8UPXOF2HDCK
iPad
https://invis.io/8UPXOF2HDCK
iPad
https://invis.io/6VPXPB9SX9T
Desktop
Desktop
https://invis.io/XQPXPA8V3CD
Test script:
Hello! Welcome to Taskly’s first interactive prototype usability testing!
You will test 2 Taskly’s features: «creating a project» and «creating a task» on 3 devices - Mobile Phone, Tablet and
Computer. You will find below 3 real-life scenarios to test each of them.
As you test features, please, write down any comments and feedback you have in mind. It can be your thoughts on
design or functional issues, such as button shapes, steps, where you got stuck or what you were confused about.
Don’t hesitate too be as critical, as possible! Your feedback will help to make Taskly better for you!
You will test 2 Taskly’s features: «creating a project» and «creating a task» on 3 devices - Mobile Phone, Tablet and
Computer. You will find below 3 real-life scenarios to test each of them.
As you test features, please, write down any comments and feedback you have in mind. It can be your thoughts on
design or functional issues, such as button shapes, steps, where you got stuck or what you were confused about.
Don’t hesitate too be as critical, as possible! Your feedback will help to make Taskly better for you!
3 real life scenarios:
1. You need to plan a Family Trip from 5th to 15th of May 2019. Please, create this project from home screen.
2. You have created a Family Trip project. You want to rent a car for this trip before 1st of May 2019. Please, create this task from whatever point of navigation you want.
3. You have planned a Christmas Dinner on 24th of December 2019 (it’s already in Taskly). You need to create a menu for this dinner. First check out your calendar to see when it’s the best time to do it. You decide on 19th of December. Please, create this task from the Calendar.
STEP 9: Following the LEAN UX principles, I created assumptions and hypothesis thinking of each user persona I have and then created 1 design to test each assumption.
ASSUMPTION AND REDESIGN FOR USER PERSONA ALEX
STEP 10: I created WIREFRAMES for mobile, tablet and desktop applying the received feedback.
WIREFRAME MOBILE
WIREFRAME TABLET
WIREFRAME DESKTOP
STEP 11: Then I created a VISUAL DESIGN, presented in UI KIT and consisted of color palette, fonts & typography, UI elements and glyphs (please, see these elements in the begining of this presentation).
STEP 12: Then I created PROTOTYPES for features "create a project" and "create a task" using UI kit, style tile, color palette and taking into account art direction of the App and design principles.
PROTOTYPE MOBILE
PROTOTYPE TABLET
PROTOTYPE DESKTOP
STEP 13: I created and conducted an A/B (PREFERENCE) and FIRST CLICK TESTS with 12 participants from Taskly's target audience using a Usability Hub service. Then I applied AARRR concept and made some suggestions on redesign.
Link to the click test:
https://app.usabilityhub.com/do/af955e43df1b/c132
STEP 14: I created Taskly's website on Wix and attached it to the Google Analytics tool. Then I made some suggestions on website changes based on Analytics results (data collected for about 5 days).
Taskly’s website link:
https://nanochka897.wixsite.com/tasklyiteasy
https://nanochka897.wixsite.com/tasklyiteasy
GOALS
STEP 15: I polished Taskly's designs, made it pixel perfect and created MOCKUPS (mockups for all 3 devices are in the very beginning of this presentation)
